<template>
	<common-card class="portal_course_adjusting">
		<sw-chart :option="chartOption" auto-resize></sw-chart>
	</common-card>
</template>

<script lang="ts" setup>
import { useChart } from '@/hooks';
import commonCard from '../commonCard.vue';
defineOptions({ name: 'CourseAdjusting' });
const { chartOption } = useChart((isDark: EChartsOption) => {
	return {
		series: [
			{
				name: 'Area Mode',
				type: 'pie',
				radius: ['45%', '60%'],
				center: ['25%', '50%'],
				roseType: 'area',
				itemStyle: { borderRadius: 10 },
				data: [
					{ value: 5, name: '调教员' },
					{ value: 2, name: '调场地' },
					{ value: 1, name: '调时间' }
				]
			},
			{
				type: 'gauge',
				startAngle: 180,
				endAngle: 0,
				center: ['75%', '75%'],
				radius: '100%',
				min: 0,
				max: 1,
				splitNumber: 8,
				axisLine: {
					lineStyle: {
						width: 6,
						color: [
							[0.25, '#FF6E76'],
							[0.5, '#FDDD60'],
							[0.75, '#58D9F9'],
							[1, '#7CFFB2']
						]
					}
				},
				pointer: {
					icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
					length: '12%',
					width: 20,
					offsetCenter: [0, '-60%'],
					itemStyle: { color: 'auto' }
				},
				axisTick: {
					length: 12,
					lineStyle: { color: 'auto', width: 2 }
				},
				splitLine: {
					length: 20,
					lineStyle: { color: 'auto', width: 5 }
				},
				axisLabel: {
					show: false
				},
				title: { offsetCenter: [0, 0], fontSize: 18 },
				detail: {
					fontSize: 18,
					offsetCenter: [0, '-25%'],
					valueAnimation: true,
					formatter: function (value) {
						return Math.round(value * 100) + '%';
					},
					color: 'inherit'
				},
				data: [{ value: 0.05, name: '因公调课' }]
			}
		]
	};
});
</script>

<style lang="scss" scoped>
.portal_course_adjusting {
	&:deep(.arco-card-body) {
		gap: 10px;
	}
}
</style>
